// 复选卡片

<template>
  <view class="mes-card-check">
    <checkbox-group @change="checkChange">
      <view class="choose">
        <view
          v-for="(pItem, pIndex) in form.items"
          class="check-item"
          :key="pIndex"
        >
          <label class="choose-label">
            <checkbox
              :value="pItem.row[form.valueName || 'id']"
              :checked="pItem.checked"
              class="choose-check"
            />
            <view class="choose-text">
              <view class="head">
                <text class="head-left text-over-1">
                  {{ pItem.header.title }}
                </text>
                <text class="head-right">{{ pItem.header.price }}</text>
              </view>
              <!-- 副标题 -->
              <view class="subheader">
                <!-- 作用域插槽 -->
                <slot name="subheader" :data="pItem.subheader"></slot>
              </view>
              <!-- 列表 -->
              <view class="body">
                <view
                  v-for="(cItem, cIndex) in pItem.body"
                  :key="cIndex"
                  class="text-over-1 body-item"
                >
                  <text>{{ cItem.name }}</text>
                  <text :style="{ color: cItem.color || '' }">{{
                    $filters.filterNull(cItem.value)
                  }}</text>
                </view>
              </view>
              <!-- 底部按钮 -->
              <view class="footer" v-if="pItem.footer">
                <view
                  class="iconfont icon-shanchu"
                  @tap.stop="del(pIndex, pItem)"
                ></view>
                <view
                  class="iconfont icon-bianji"
                  @tap.stop="edit(pIndex, pItem)"
                ></view>
              </view>
            </view>
          </label>
        </view>
      </view>
    </checkbox-group>
  </view>
</template>

<script>
export default {
  props: {
    form: Object
  },
  onLoad(options) {
    this.$nextTick(() => {
      this.init()
    })
  },
  data() {
    return {}
  },
  methods: {
    // 删除
    del(i, item) {
      if (this.form.del) {
        this.form.del(i, item)
      } else {
        //   this.form.items.splice(i, 1)
        // this.form.checked.forEach((item1, index1) => {
        //   if (item1 == item[this.form.valueName || 'id']) {
        //     this.form.checked.splice(index1, 1)
        //   }
        // })
        console.warn('请在表单中定义del')
      }
      console.log('删除之后的checked', this.form.checked)
    },
    // 编辑
    edit(i, row) {
      if (this.form.edit) {
        this.form.edit(i, row)
      } else {
        console.warn('请在表单中定义edit')
      }
    },
    // 赋初值
    init() {
      if (this.form.checked.length) {
        this.form.items.forEach((item) => {
          const findRes = this.form.checked.find(
            (item1) => item1 == item.row[this.form.valueName || 'id']
          )
          item.checked = Boolean(findRes)
        })
      } else {
        this.form.items.forEach((item) => {
          item.checked = false
        })
      }
    },
    // 选择
    checkChange(e) {
      this.form.checked = e.detail.value
      console.log('this.form.checked', this.form.checked)
      this.init()
      if (this.form.checkChange) {
        this.form.checkChange(e, this.form)
      } else {
        console.warn('请在表单中定义checkChange')
      }
    },
    // 获取所有选中
    getChecked() {
      let checkedItems = []
      this.form.checked.forEach((item) => {
        this.form.items.forEach((item1) => {
          if (item1.row[this.form.valueName || 'id'] == item) {
            item1.checked = true
            checkedItems.push({
              ...item1
            })
          }
        })
      })
      return checkedItems
    }
  }
}
</script>

<style lang="less" scoped>
.choose {
  .choose-text {
    width: 100%;
    background-color: #fff;
    margin-left: 50rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx 40rpx;
  }
  .check-item {
    margin-top: 20rpx;
    &:first-child {
      margin-top: 0;
    }
    .choose-label {
      width: 702rpx;
      margin: 24rpx auto 0;
      display: flex;
      align-items: center;
      padding-left: 16rpx;
      &:first-child {
        margin-top: 0;
      }
    }
    .choose-text {
      overflow: hidden;
      flex: 1;
      .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 500;
        .head-left {
          flex: 1;
          margin-right: 20rpx;
        }
        .head-right {
        }
      }
      .subheader {
        margin-top: 15rpx;
        width: 100%;
        color: #111111;
        font-size: 28rpx;
      }
      // 列表
      .body {
        display: flex;
        flex-direction: column;

        font-size: 24rpx;
        color: #666666;
        line-height: 24rpx;
        .body-item {
          margin-top: 20rpx;

          color: #111111;

          &:first-child {
            margin-top: 40rpx;
          }
        }
      }
      // 底部按钮
      .footer {
        margin-top: 24rpx;
        display: flex;
        justify-content: flex-end;
        .iconfont {
          font-size: 48rpx;
          color: #000000;
        }
        .icon-bianji {
          margin-left: 72rpx;
        }
      }
    }
  }
}
</style>
